<template>
    <fieldset>
        <legend>折线图</legend>
        <div class="container" ref="container"></div>
    </fieldset>
</template>
<style scoped>
.container {
    height: 500px;
}
</style>

<script setup lang='ts'>
//引入axios
import axios from "axios"
//引入echarts
import * as echarts from "echarts";
//引入折线图选项
import lineOption from "../echarts/lineChart"
import { ref, onMounted } from "vue"
// ref引用容器
let container = ref<HTMLElement | null>(null)

//初始化

onMounted(async (): Promise<void> => {
    let lineChart = echarts.init(container.value!)

    //发起请求,请求折线图数据

    //打开加载动画
    lineChart.showLoading()

    let res = await axios.get("/api/data/rate.json")

    let data = res.data?.data;

    // console.log(data)
    //处理数据
    let rates: Array<number> = [];//数据
    //类别
    let category: string[] = data.map((item): string => {
        rates.push(item.rate)
        return item.name
    })

    console.log(category)
    console.log(rates)
    lineOption.xAxis.data = category;
    lineOption.series[0].data = rates;
    //关闭加载器
    lineChart.hideLoading()
    lineChart.setOption(lineOption)
})

</script>